// 引入node.js的内置模块，path模块用于处理路径
const path = require('path')
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//  压缩css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


module.exports = {
    // 1.入口,告诉webpack从哪里开始打包
    entry: {
        // 公共样式写在前面
        commonCss:'./src/js/common-css.js',

        // 公共的js
        dom: "./src/js/common-js/dom.js",
        utils: "./src/js/common-js/utils.js",

        // 页面的模块写在后面
        advertisement:'./src/js/advertisement.js',  //广告页
        register:'./src/js/register.js',  //注册
        login:'./src/js/login.js',  //登录
        index:'./src/js/index.js',  //首页
        sports:'./src/js/sports.js',  //运动
        my:'./src/js/my.js',  //我的
        personalInfo:'./src/js/personalInfo.js',  //个人信息修改页
        ride:'./src/js/ride.js',  //骑行
        course:'./src/js/course.js',  //课程训练
        courseDetails:'./src/js/courseDetails.js',  //课程详情页
        courseVideo:'./src/js/courseVideo.js',  //课程视频
        mySportsData:'./src/js/mySportsData.js',  //我的运动数据
        myBadge:'./src/js/myBadge.js',  //我的徽章

    },
    // 2.出口
    output: {
        path: path.resolve(__dirname, 'dist'), //告诉webpack把打包后的文件存放在哪里，必须是绝对路径。
        filename: 'js/[name]-[hash:5].js'
    },

    // 3.加载器  loader
    module: {
        // 配置规则
        rules: [
            // 处理css文件
            {
                test: /\.css$/,  // 匹配所有.css文件
                use: [
                    // 'style-loader',  // 创建style标签 把css插入html的head内 
                    MiniCssExtractPlugin.loader,    
                    'css-loader',  // 解析加载css到js中（把css打成字符串）
                    'postcss-loader'
                ]
            },
            // 处理less文件
            {
                test: /\.less$/,  // 匹配所有.less文件
                use: [
                    // 'style-loader',
                    // MiniCssExtractPlugin.loader,
                   MiniCssExtractPlugin.loader,
                    'css-loader',  // 解析加载css到js中（把css打成字符串）
                    'postcss-loader',
                    'less-loader'  // 把less文件 转为 css文件 
                ]
            },
            // 加载html中的资源，图片，视频
            {
                test: /\.html$/,  // 匹配所有.html文件
                loader: 'html-loader'
            },
            // 处理背景图片
            {
                test: /\.(png|jpeg|jpg|gif)/,
                loader: 'url-loader',
                options: {
                    name: '[hash:8].[ext]', // 图片输出的名字hash长度8位 默认32位
                    limit: 10 * 1024,  // 小于10kb base64处理
                    esModule: false,  //关闭 es6的模块化，使用nodejs的模块化
                    outputPath:'img'  //输出路径
                }
            },
            // 处理字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:8].[ext]',  // 输出名字
                    outputPath: 'font'  //输出路径
                }
            },
            // ES6的代码编译成ES5
            {
                test: /\.js$/,
                loader: 'babel-loader',  // loader 编译es6为es5
                exclude: /node_moduled/  // 排除
            }
        ]
    },
    // 4.插件
    plugins: [
        // 处理广告页的插件
        new HtmlWebpackPlugin({
            template: './src/page/advertisement.html',
            filename:'advertisement.html',
            chunks:["advertisement", "commonCss", "dom", "utils"]
        }),
        // 处理注册页的插件
        new HtmlWebpackPlugin({
            template: './src/page/register.html',
            filename:'register.html',
            chunks:["register", "commonCss", "dom", "utils"]
        }),
        // 处理登录页的插件
        new HtmlWebpackPlugin({
            template: './src/page/login.html',
            filename:'login.html',
            chunks:["login", "commonCss", "dom", "utils"]
        }),
        // 处理首页的插件
        new HtmlWebpackPlugin({
            template: './src/page/index.html',
            filename:'index.html',
            chunks:["index", "commonCss", "dom", "utils"]
        }),
        // 处理运动页的插件
        new HtmlWebpackPlugin({
            template: './src/page/sports.html',
            filename:'sports.html',
            chunks:["sports", "commonCss", "dom", "utils"]
        }),
        // 处理我的页面的插件
        new HtmlWebpackPlugin({
            template: './src/page/my.html',
            filename:'my.html',
            chunks:["my", "commonCss", "dom", "utils"]
        }),
         // 处理个人信息页面的插件
         new HtmlWebpackPlugin({
            template: './src/page/personalInfo.html',
            filename:'personalInfo.html',
            chunks:["personalInfo", "commonCss", "dom", "utils"]
        }),
        // 处理骑行页面的插件
        new HtmlWebpackPlugin({
            template: './src/page/ride.html',
            filename:'ride.html',
            chunks:["ride", "commonCss", "dom", "utils"]
        }),
        // 处理课程训练页面的插件
        new HtmlWebpackPlugin({
            template: './src/page/course.html',
            filename:'course.html',
            chunks:["course", "commonCss", "dom", "utils"]
        }),
        // 处理课程详情页页面的插件   
        new HtmlWebpackPlugin({
            template: './src/page/courseDetails.html',
            filename:'courseDetails.html',
            chunks:["courseDetails", "commonCss", "dom", "utils"]
        }),
        // 处理课程详视频页面的插件   
        new HtmlWebpackPlugin({
            template: './src/page/courseVideo.html',
            filename:'courseVideo.html',
            chunks:["courseVideo", "commonCss", "dom", "utils"]
        }),
         // 处理我的运动数据页面的插件   
         new HtmlWebpackPlugin({
            template: './src/page/mySportsData.html',
            filename:'mySportsData.html',
            chunks:["mySportsData", "commonCss", "dom", "utils"]
        }),
         // 处理我的徽章页面的插件   
         new HtmlWebpackPlugin({
            template: './src/page/myBadge.html',
            filename:'myBadge.html',
            chunks:["myBadge", "commonCss", "dom", "utils"]
        }),


        // 提取css的插件
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css'  // 重命名输出的css
        }),
        // 压缩css的插件
        // new OptimizeCssAssetsWebpackPlugin()
    ],
    // 5.模式
     mode:'development' , //开发模式:development
    // mode: 'production',  //生产模式:production

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 666,  // 端口
        open: true, // 自动打开服务
        publicPath: '/',  // 默认dist就是服务器根目录 从根目录查找资源
        openPage: 'advertisement.html', // 打开的页面
    },
}